<template>
  <div id="app">
    <div class="box">
      <img
        class="bgimg"
        src="https://html.nunbdc.net/image/agenton.jpg"
        alt=""
      />
      <img
        class="mappart"
        src="https://html.nunbdc.net/image/agent-cd.jpg"
        alt=""
      />
      <div
        v-show="grabdata.mapData.houseInputCount > 0"
        class="shownum showbox1"
      >
        房源录入{{ grabdata.mapData.houseInputCount }}个
      </div>
      <div
        v-show="grabdata.mapData.takeServiceCount > 0"
        class="shownum showbox2"
      >
        带看服务{{ grabdata.mapData.takeServiceCount }}个
      </div>
      <div
        v-show="grabdata.mapData.transactionServiceCount > 0"
        class="shownum showbox3"
      >
        交易服务{{ grabdata.mapData.transactionServiceCount }}个
      </div>
      <div
        v-show="grabdata.mapData.financialServiceCount > 0"
        class="shownum showbox4"
      >
        金融服务{{ grabdata.mapData.financialServiceCount }}个
      </div>
      <div
        v-show="grabdata.mapData.deliveryServiceCount > 0"
        class="shownum showbox5"
      >
        交割服务{{ grabdata.mapData.deliveryServiceCount }}个
      </div>
      <div v-show="grabdata.mapData.consultCount > 0" class="shownum showbox6">
        咨询服务{{ grabdata.mapData.consultCount }}个
      </div>
      <div class="city city1">
        <div>今日已发布服务订单(成都市)</div>
        <div class="numbox" v-show="grabdata.secondHandHouseReleased > 0">
          {{ grabdata.secondHandHouseReleased }}个
        </div>
        <div class="numbox" v-show="grabdata.secondHandHouseReleased <= 0">
          0个
        </div>
      </div>
      <div class="city city2">
        <div>代抢(分配)服务订单(成都市)</div>
        <div class="numbox" v-show="grabdata.secondHandHouseAcquire > 0">
          {{ grabdata.secondHandHouseAcquire }}个
        </div>
        <div class="numbox" v-show="grabdata.secondHandHouseAcquire <= 0">
          0个
        </div>
      </div>
      <div class="city city3">
        <div>当前服务佣金规模预估</div>
        <div class="numbox" v-show="grabdata.commissionScale > 0">
          {{ grabdata.commissionScale }}元
        </div>
        <div class="numbox" v-show="grabdata.commissionScale <= 0">0元</div>
      </div>
      <div class="city city4">
        <div>今日已发布咨询服务单(成都市)</div>
        <div class="numbox" v-show="grabdata.mapData.consultCount > 0">
          {{ grabdata.mapData.consultCount }}个
        </div>
        <div class="numbox" v-show="grabdata.mapData.consultCount <= 0">
          0个
        </div>
      </div>
      <div class="city city5">
        <div>今日已发布带看服务单(成都市)</div>
        <div class="numbox" v-show="grabdata.newHouseTakeServiceCount > 0">
          {{ grabdata.newHouseTakeServiceCount }}个
        </div>
        <div class="numbox" v-show="grabdata.newHouseTakeServiceCount <= 0">
          0个
        </div>
      </div>
      <div class="num1">
        抢鲜名额限<span>{{ num1 }}{{ num2 }}{{ num3 }}{{ num4 }}{{ num5 }}</span
        >名
      </div>
      <div class="num2">
        仅剩<span>00{{ num6 }}{{ num7 }}{{ num8 }}</span
        >个
      </div>
      <div class="btnpart">
        <button @click="jump">即刻下载 快速赚佣</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
             grabdata: {
            mapData: {
              houseInputCount: 47,
              deliveryServiceCount: 71,
              transactionServiceCount: 71,
              financialServiceCount: 96,
              takeServiceCount: 88,
              consultCount: 58,
            },
            commissionScale: 1866364,
            secondHandHouseAcquire: 333,
            secondHandHouseReleased: 381,
            newHouseTakeServiceCount: 40,
            num1: 1,
            num2: 0,
            num3: 0,
            num4: 0,
            num5: 0,
            num6: 2,
            num7: 3,
            num8: 5,
          }
        }
    },
    methods: {
         jump() {
            window.location.href =
              "https://a.app.qq.com/o/simple.jsp?pkgname=com.nuan";
          }
    },
    mounted() {
          this.timer = setInterval(() => {
            if (300 > this.grabdata.mapData.houseInputCount > 0) {
              let a = Math.floor(Math.random() * 20);
              let b = Math.floor(Math.random() * 20);
              this.grabdata.mapData.houseInputCount =
                this.grabdata.mapData.houseInputCount + a - b;
            } else if (this.grabdata.mapData.houseInputCount > 300) {
              this.grabdata.mapData.houseInputCount = 300;
              let a = Math.floor(Math.random() * 20);
              this.grabdata.mapData.houseInputCount =
                this.grabdata.mapData.houseInputCount - a;
            } else {
              this.grabdata.mapData.houseInputCount = 0;
              let a = Math.floor(Math.random() * 20);
              this.grabdata.mapData.houseInputCount = a;
            }

            if (300 > this.grabdata.mapData.takeServiceCount > 0) {
              let a = Math.floor(Math.random() * 20);
              let b = Math.floor(Math.random() * 20);
              this.grabdata.mapData.takeServiceCount =
                this.grabdata.mapData.takeServiceCount + a - b;
            } else if (this.grabdata.mapData.takeServiceCount > 300) {
              this.grabdata.mapData.takeServiceCount = 300;
              let a = Math.floor(Math.random() * 20);
              this.grabdata.mapData.takeServiceCount =
                this.grabdata.mapData.takeServiceCount - a;
            } else {
              this.grabdata.mapData.takeServiceCount = 0;
              let a = Math.floor(Math.random() * 20);
              this.grabdata.mapData.takeServiceCount = a;
            }

            if (300 > this.grabdata.mapData.transactionServiceCount > 0) {
              let a = Math.floor(Math.random() * 20);
              let b = Math.floor(Math.random() * 20);
              this.grabdata.mapData.transactionServiceCount =
                this.grabdata.mapData.transactionServiceCount + a - b;
            } else if (this.grabdata.mapData.transactionServiceCount > 300) {
              this.grabdata.mapData.transactionServiceCount = 300;
              let a = Math.floor(Math.random() * 20);
              this.grabdata.mapData.transactionServiceCount =
                this.grabdata.mapData.transactionServiceCount - a;
            } else {
              this.grabdata.mapData.transactionServiceCount = 0;
              let a = Math.floor(Math.random() * 20);
              this.grabdata.mapData.transactionServiceCount = a;
            }

            if (200 > this.grabdata.mapData.deliveryServiceCount > 0) {
              let a = Math.floor(Math.random() * 20);
              let b = Math.floor(Math.random() * 20);
              this.grabdata.mapData.deliveryServiceCount =
                this.grabdata.mapData.deliveryServiceCount + a - b;
            } else if (this.grabdata.mapData.deliveryServiceCount > 200) {
              this.grabdata.mapData.deliveryServiceCount = 200;
              let a = Math.floor(Math.random() * 20);
              this.grabdata.mapData.deliveryServiceCount =
                this.grabdata.mapData.deliveryServiceCount - a;
            } else {
              this.grabdata.mapData.deliveryServiceCount = 0;
              let a = Math.floor(Math.random() * 20);
              this.grabdata.mapData.deliveryServiceCount = a;
            }

            if (300 > this.grabdata.mapData.financialServiceCount > 0) {
              let a = Math.floor(Math.random() * 20);
              let b = Math.floor(Math.random() * 20);
              this.grabdata.mapData.financialServiceCount =
                this.grabdata.mapData.financialServiceCount + a - b;
            } else if (this.grabdata.mapData.financialServiceCount > 300) {
              this.grabdata.mapData.financialServiceCount = 300;
              let a = Math.floor(Math.random() * 20);
              this.grabdata.mapData.financialServiceCount =
                this.grabdata.mapData.financialServiceCount - a;
            } else {
              this.grabdata.mapData.financialServiceCount = 0;
              let a = Math.floor(Math.random() * 20);
              this.grabdata.mapData.financialServiceCount = a;
            }

            if (500 > this.grabdata.mapData.consultCount > 0) {
              let a = Math.floor(Math.random() * 20);
              let b = Math.floor(Math.random() * 20);
              this.grabdata.mapData.consultCount =
                this.grabdata.mapData.consultCount + a - b;
            } else if (this.grabdata.mapData.consultCount > 300) {
              this.grabdata.mapData.consultCount = 500;
              let a = Math.floor(Math.random() * 20);
              this.grabdata.mapData.consultCount =
                this.grabdata.mapData.consultCount - a;
            } else {
              this.grabdata.mapData.consultCount = 0;
              let a = Math.floor(Math.random() * 20);
              this.grabdata.mapData.consultCount = a;
            }

            if (1700 > this.grabdata.secondHandHouseReleased > 0) {
              let a = Math.floor(Math.random() * 20);
              let b = Math.floor(Math.random() * 20);
              this.grabdata.secondHandHouseReleased =
                this.grabdata.secondHandHouseReleased + a - b;
            } else if (this.grabdata.secondHandHouseReleased > 1700) {
              this.grabdata.secondHandHouseReleased = 1700;
              let a = Math.floor(Math.random() * 20);
              this.grabdata.secondHandHouseReleased =
                this.grabdata.secondHandHouseReleased - a;
            } else {
              this.grabdata.secondHandHouseReleased = 0;
              let a = Math.floor(Math.random() * 20);
              this.grabdata.secondHandHouseReleased = a;
            }

            if (1200 > this.grabdata.secondHandHouseAcquire > 0) {
              let a = Math.floor(Math.random() * 20);
              let b = Math.floor(Math.random() * 20);
              this.grabdata.secondHandHouseAcquire =
                this.grabdata.secondHandHouseAcquire + a - b;
            } else if (this.grabdata.secondHandHouseAcquire > 1200) {
              this.grabdata.secondHandHouseAcquire = 1200;
              let a = Math.floor(Math.random() * 20);
              this.grabdata.secondHandHouseAcquire =
                this.grabdata.secondHandHouseAcquire - a;
            } else {
              this.grabdata.secondHandHouseAcquire = 0;
              let a = Math.floor(Math.random() * 20);
              this.grabdata.secondHandHouseAcquire = a;
            }

            if (this.grabdata.commissionScale > 0) {
              let a = Math.floor(Math.random() * 100000);
              let b = Math.floor(Math.random() * 100000);
              this.grabdata.commissionScale =
                this.grabdata.commissionScale + a - b;
            } else {
              this.grabdata.commissionScale = 0;
              let a = Math.floor(Math.random() * 10000);
              this.grabdata.commissionScale = a;
            }

            if (100 > this.grabdata.newHouseTakeServiceCount > 0) {
              let a = Math.floor(Math.random() * 10);
              let b = Math.floor(Math.random() * 10);
              this.grabdata.newHouseTakeServiceCount =
                this.grabdata.newHouseTakeServiceCount + a - b;
            } else if (this.grabdata.newHouseTakeServiceCount > 100) {
              this.grabdata.newHouseTakeServiceCount = 100;
              let a = Math.floor(Math.random() * 10);
              this.grabdata.newHouseTakeServiceCount =
                this.grabdata.newHouseTakeServiceCount - a;
            } else {
              this.grabdata.newHouseTakeServiceCount = 0;
              let a = Math.floor(Math.random() * 10);
              this.grabdata.newHouseTakeServiceCount = a;
            }

            this.num1 = Math.floor(Math.random() * 9);
            this.num2 = Math.floor(Math.random() * 10);
            this.num3 = Math.floor(Math.random() * 10);
            this.num4 = Math.floor(Math.random() * 10);
            this.num5 = Math.floor(Math.random() * 10);
            this.num6 = Math.floor(Math.random() * 10);
            this.num7 = Math.floor(Math.random() * 10);
            this.num8 = Math.floor(Math.random() * 10);
          }, 300);
        }
};
</script>

<style scoped>
      html,
      body {
        margin: 0;
        height: 100%;
      }
      .box {
        width: 100%;
        position: relative;
      }
      .bgimg {
        width: 100%;
      }
      .mappart {
        width: 80%;
        position: absolute;
        top: 28%;
        left: 10%;
        z-index: 1000;
      }
      .shownum {
        position: absolute;
        padding: 4px 10px;
        background-color: #d43b33;
        color: #fff;
        font-size: 12px;
        border-radius: 5px;
        z-index: 2000;
      }
      .showbox1 {
        top: 30%;
        left: 60%;
      }
      .showbox2 {
        top: 34%;
        left: 15%;
      }
      .showbox3 {
        top: 32%;
        left: 40%;
      }
      .showbox4 {
        top: 34%;
        left: 62%;
      }
      .showbox5 {
        top: 29%;
        left: 20%;
      }
      .showbox6 {
        top: 36%;
        left: 40%;
      }
      .city {
        position: absolute;
        font-size: 12px;
        z-index: 2000;
        left: 10%;
        color: #333;
        font-weight: bold;
        padding-top: 3px;
        display: flex;
        justify-content: space-between;
        width: 80%;
        padding: 0 15px;
        box-sizing: border-box;
      }
      .city1 {
        top: 41%;
      }
      .city2 {
        top: 42.5%;
      }
      .city3 {
        top: 44%;
      }
      .city4 {
        top: 48.5%;
      }
      .city5 {
        top: 49.5%;
      }
      .numbox {
        color: #d43b33;
      }
      .btnpart {
        position: fixed;
        bottom: 0px;
        left: 0px;
        width: 100%;
        z-index: 100;
        padding: 20px 0 24px;
        text-align: center;
        background-color: rgba(244, 121, 53);
        z-index: 100000;
      }
      button {
        font-size: 22px;
        border: none;
        border-radius: 25px;
        height: 48px;
        width: 91%;
        color: #ff7300;
        font-weight: bold;
        background-color: #fff;
      }
      .num1 {
        width: 100%;
        text-align: center;
        position: absolute;
        font-size: 12px;
        z-index: 2000;
        font-weight: bold;
        top: 57.5%;
        padding-top: 13px;
        font-size: 20px;
        color: #333;
        letter-spacing: 3px;
      }
      .num1 > span {
        margin-right: 5px;
        letter-spacing: 0px;
        font-size: 27px;
        color: #ff7300;
        font-weight: bold;
      }
      .num2 {
        width: 100%;
        text-align: center;
        position: absolute;
        font-size: 12px;
        z-index: 2000;
        font-weight: bold;
        top: 59%;
        padding-top: 13px;
        font-size: 25px;
        color: #333;
        letter-spacing: 3px;
      }
      .num2 > span {
        margin-right: 5px;
        letter-spacing: 0px;
        font-size: 50px;
        color: #ff7300;
        font-weight: bold;
      }
</style>